<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<link th:href="@{/css/crollpane/jquery.jscrollpane.css}" rel="stylesheet"/>
<head th:include="include :: header"></head>
<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="menu-form">
                    <div class="select-list">
                        <ul>
                            <li>
                                表：<select id="table-select" name="visible" onchange="javascript:$('#filedInput').val(''); " ></select>
                                <input id="table-select-hidden" type="hidden" value=""  />
                            </li>
                            <li>
                                字段：<input id="filedInput" type="text" readonly="readonly" onclick="openDialog()"/>
                            </li>
                            <li>
                                <!--<label> 导入文件：</label>-->
                                <input  id="fileInput"  type="file" name="file" accept=".txt"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="batchExport()"><i class="fa fa-search"></i>&nbsp;上传</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="batchAdd()"><i class="fa fa-refresh"></i>&nbsp;导入</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table" data-mobile-responsive="true"></table>
            </div>

        </div>
    </div>

<div th:include="include :: footer"></div>
<script th:src="@{/js/crollpane/jquery.jscrollpane.min.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "system/batch";

        $(function() {
            initTableInfo();
        });

        function initTableInfo () {
            $.ajax({
                type : 'get',
                url: prefix + "/getTable",
                success : function(result) {
                    var select = $("#table-select");
                    var html = "option value=''>请选择</option>";
                    if(result){
                        result.forEach(function(ele) {
                            html +=  "<option value="+ele+">"+ele+"</option>";
                        });
                    }
                    select.html(html);
                }
            });
        }

        function openDialog () {
            var tableVal = $("#table-select").val();
            $.modal.open("选择字段", prefix + "/getFiled"+"/"+tableVal);
        }

        function batchExport () {
            var filedInput = $("#filedInput").val();
            var fileInput = $("#fileInput").val();
            var tableSelect = $('#table-select').val();
            if(filedInput == '' || fileInput == ''){
                $.modal.alert("请选择需要批导的字段并上传TXT文件");
                return;
            }
            var formData = new FormData();
            formData.append("filedInput",filedInput);
            formData.append("fileInput",document.getElementById("fileInput").files[0]);
            formData.append("tableSelect",tableSelect);
            $('#table-select-hidden').val($('#table-select').val());
            $.ajax({
                url: prefix+ "/public/upload",
                type:"post",
                data:formData,
                processData:false,
                contentType:false,
                success:function(data){
                    initGrid(data);
                }
            });

        }

        function initGrid (data) {
            $("#bootstrap-table").bootstrapTable('destroy');

            var filedList = data[0].filedList;
            var titleOpions = new Array();
            for (var title in filedList[0]) {
                var obj ={};
                obj.title = title;
                obj.field = title;
                titleOpions.push(obj)
            }
            console.log(titleOpions);
            var options = {
                data: filedList,
                dataType: "json",
                search: false,
                showExport: false,
                pageNumber : 1,
                pageSize : 10,
                sidePagination: "client"
            }
            options.columns =  titleOpions;
            $('#bootstrap-table').bootstrapTable(options);
        }

        function batchAdd() {
            var table = $('#table-select-hidden').val();
            var filedList = $('#bootstrap-table').bootstrapTable("getData");
            if(filedList.context){
                $.modal.alertWarning("请先上传文件!");
                return;
            }
            $.ajax({
                url: prefix+ "/add",
                type:"post",
                data: {
                    table : table,
                    filedList : JSON.stringify(filedList)
                },
                success:function(msg){
                    $.modal.msgSuccess("操作成功!");
                    $("#bootstrap-table").bootstrapTable('destroy');
                }
            });
        }

    </script>

</body>
</html>